<template>
  <div class="item-wrapper" @click="pick">
    <div class="titleView">{{title}}</div>
    <div class="flex_start item-wrapper-right ">
      <div>
        <p class="avatar-img" v-if="isImg">
          <uploader-hand-pic
            :headerImage='content' :isOrg="true"
          ></uploader-hand-pic>
        </p>
        <p class="ellipsis1 contentView" v-else-if="!isEmpty">{{content}}</p>
        <p v-else class="contentView">请填写{{title}}</p>
      </div>
      <div class="arrow-img"><img src="/web-hft-ee/static/img/m/me_arrows.png"></div>
    </div>

  </div>
</template>

<script>
  import uploaderHandPic from '@/components/uploaderHandPic'

  export default {
    name: 'myInfoItem',
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      isEmpty: {
        type: Boolean,
        default: false,
      }
    },
    components: {
      uploaderHandPic
    },
    data() {
      return {
        uploaderShow: false,
      }
    },
    computed: {
      isImg() {
        return this.title === '企业头像'
      }
    },
    methods: {
      pick() {
        let data = {
          'title': this.title,
          'content': this.content
        }
        console.log(data)
        this.$emit('itemData', data) //父组件监听的名字必须是formSubmit
      },
    },
  }
</script>

<style scoped>
  .item-wrapper {
    display: flex;
    justify-content: space-between;
    height: 64px;
    width: auto;
    border-bottom: 1px #EEEEEE solid;
    padding: 0px 16px;
    background: white;
    align-items: center;
    font-size: 16px;
  }

  .item-wrapper > div:nth-of-type(1) {
    width: 100px;
  }

  .titleView {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: #98999E;
  }

  .item-wrapper-right {
    align-items: center;
  }

  .contentView {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: #323334;
  }

  .avatar-img {
  }

  .arrow-img > img {
    height: 21px;
  }
</style>

